.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container--info {
  color: var(--blue700);
  transition: color 0.2s ease-out;
  &:hover {
    color: var(--blue800);
  }
}

.tooltip-bubble {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 100%, 0);
  border-radius: 4px;
  background: var(--navy900);
  font-size: 14px;
  color: var(--white);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0, 1, 1, 1),
    transform 200ms cubic-bezier(0, 1, 1, 1), visibility 200ms step-start;
  max-width: 260px;
  min-width: 200px;
  padding: 10px 20px;
  z-index: 99999; /* Move to token */
  &:before {
    position: absolute;
    display: block;
    content: '';
    height: 0;
    border: transparent solid;
    border-width: 0 6px 6px 6px;
    border-bottom-color: var(--navy900);
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -100%, 0);
  }
}

.tooltip-container:hover .tooltip-bubble {
  visibility: visible;
  opacity: 1;
  transform: translate3d(-50%, calc(100% + 8px), 0);
}

.tooltip-bubble--right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate3d(100%, -50%, 0);
  &:before {
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--navy900) transparent transparent;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translate3d(-100%, -50%, 0);
  }
}
.tooltip-container:hover .tooltip-bubble--right {
  transform: translate3d(calc(100% + 8px), -50%, 0);
}

.tooltip-bubble--content-width {
  min-width: auto;
  max-width: none;
  white-space: nowrap;
}
